<template>
  <!--头部-->
  <div class="wrapper">
    <router-link to="/city">
      <div class="left">
        {{this.$store.state.city}}
        <span class="iconfont left-icon">&#xe65a;</span>
      </div>
    </router-link>
    <div class="input">
      <input type="text" class="input-search" placeholder="输入小区/楼盘名">
    </div>
    <div class="right">
      <span class="iconfont right-icon">&#xe617;</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'TouBu',
    //接收 json 数据
    props: {
      city: String
    },
    data () {
      return {}
    }
  }
</script>

<style lang="stylus" scoped>
  @import "~styles/varibles.styl"

  .wrapper
    width 100%
    height $headerHeight
    display flex
    justify-content space-around
    align-items center
    background $bgColor
    -webkit-box-shadow: 0 0.04rem 0.106667rem 0 hsla(0, 2%, 71.2%, .18)
    color $textColo
    overflow hidden
    position sticky
    top: 0

    z-index 3

  .left
    min-width: 1.2rem
    line-height $headerHeight
    text-align center
    padding .02rem
    color $headerIcon

  .left-icon
    font-size .1rem
    color $headerIcon

  .input
    flex 1
    line-height $headerHeight
    position relative

  /*.input-icon*/
  /*  position absolute*/
  /*  top 0*/
  /*  left 1rem*/
  /*  z-index 3*/
  /*  color$headerIcon*/

  .input-search
    box-sizing border-box
    width 100%
    border-radius .03rem
    padding .1rem .8rem
    color #333333


  .right
    width 1rem
    height 100%
    line-height $headerHeight
    text-align center

  .right-icon
    font-size .5rem

    color $headerIcon
</style>

